<%--
  Created by IntelliJ IDEA.
  User: 惠普
  Date: 2020/5/12
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>用户管理</title>
    <%@include file="/common/header.jsp"%>
    <style>
        .ivu-form-item{
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
    <div id="roots">
        <Collapse value="Panel">
            <Panel name="Panel">
                多条件查询
                <p slot="content">
                    <i-form :label-width="60" inline>
                        <Form-Item label="角色名称">
                            <i-input type="text" v-model="roleVo.userName"></i-input>
                        </Form-Item>
                        <Form-Item label="角色编号">
                            <i-input type="text" v-model="roleVo.bianHao"></i-input>
                        </Form-Item>
                        <%--<Form-Item label="用户角色">--%>
                            <%--<i-Select v-model="userVo.userRole" remote :remote-method="getrolelist" style="width: 120px;">--%>
                                <%--<i-Option :value="''">---全部---</i-Option>--%>
                                <%--<i-Option v-for="item in rolelist" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>--%>
                            <%--</i-Select>--%>
                        <%--</Form-Item>--%>
                        <Form-Item label="出生日期">
                            <Date-Picker type="date" placeholder="start date" style="width: 190px" v-model="roleVo.stime" @on-change="roleVo.stime=$event"></Date-Picker>
                            <Date-Picker type="date" placeholder="end date" style="width: 190px" v-model="roleVo.etime" @on-change="roleVo.etime=$event"></Date-Picker>
                        </Form-Item>
                        <i-button type="primary" @click="pageNo=1;getrolelist();">搜索</i-button>
                    </i-form>
                </p>
            </Panel>
        </Collapse>
        <card>
            <shiro:hasPermission name="role:add">
            <i-button type="primary" @click="add">添加</i-button>
            </shiro:hasPermission>
        </card>
        <i-table :columns="columns" :data="data" border stripe height="500">
            <%--<template slot-scope="{row,index}" slot="gender">--%>
                <%--{{row.gender==1?"男":"女"}}--%>
            <%--</template>--%>
                <template slot-scope="{row,index}" slot="zhiwei">
                {{row.wai.zhiwei}}
                </template>
            <template slot-scope="{row,index}" slot="action">
                <shiro:hasPermission name="role:update">
                <i-Button type="success" size="large" @click="update(row,index)">修改</i-Button>
                </shiro:hasPermission>
                <shiro:hasPermission name="role:del">
                <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
                </shiro:hasPermission>
            </template>
        </i-table>
        <template>
            <Page :total="total"
                  show-total
                  :page-size="pageSize"
                  style="margin-left: 300px;"
                  :current.sync="pageNo"
                  show-sizer
                  :page-size-opts="[5,10,15,20]"
                  @on-page-size-change="pageSize=arguments[0];getrolelist();"
                  @on-change="getrolelist"/>
        </template>
        <Modal  v-model="modaladd"  title="添加角色" @on-ok="doadd">
            <i-form :label-width="80">
                <Form-Item label="角色名称">
                    <i-input v-model="role.username"></i-input>
                </Form-Item>
                <Form-Item label="角色密码">
                    <i-input v-model="role.password"></i-input>
                </Form-Item>
                <Form-Item label="角色编号">
                    <i-input v-model="role.bianhao"></i-input>
                </Form-Item>
                <Form-Item label="角色性别">
                    <%--<i-input v-model="role.xingbie"></i-input>--%>
                            <Radio-Group v-model="role.xingbie">
                                <Radio label="男" border></Radio>
                                <Radio label="女" border></Radio>
                            </Radio-Group>
                </Form-Item>
            </i-form>
        </Modal>
        <Modal v-model="modalupdate" title="修改角色" @on-ok="doupdate">
            <i-form :label-width="80">
                <Form-Item label="角色名称">
                    <i-input v-model="role.username"></i-input>
                </Form-Item>
                <Form-Item label="角色密码">
                    <i-input v-model="role.password"></i-input>
                </Form-Item>
                <Form-Item label="角色编号">
                    <i-input v-model="role.bianhao"></i-input>
                </Form-Item>
                <Form-Item label="角色性别">
                    <%--<i-input v-model="role.xingbie"></i-input>--%>
                        <Radio-Group v-model="role.xingbie">
                            <Radio label="男" border></Radio>
                            <Radio label="女" border></Radio>
                        </Radio-Group>
                </Form-Item>
                <Form-Item label="用户生日">
                    <Date-Picker type="datetime" format="yyyy-MM-dd" v-model="role.birthday"></Date-Picker>
                </Form-Item>
            </i-form>
        </Modal>
    </div>
</body>
<script>
    new Vue({
        el:"#roots",
        data:{
            columns:[
                {title:"角色名称",key:"username"},
                {title:"角色密码",key:"password"},
                {title:"角色编号",key:"bianhao"},
                {title:"角色职位",slot:"zhiwei"},
                {title:"角色性别",key:"xingbie"},
                {title:"创建日期",key:"birthday"},
                {title:"操作",slot:"action"}
            ],
            data:[],
            modaladd:false,
            modalupdate:false,
            roleVo:{},
            role:{},
            wai:{},
            total:50,
            pageSize:5,
            pageNo:1
        },
        mounted(){
            this.getrolelist();
        },
        methods:{
            getrolelist(){
                axios.get(`/rolelist/${this.pageNo}/${this.pageSize}`,{params:this.roleVo})
                    .then(({data})=>{
                        this.data=data.result.record;
                        this.total=data.result.total;
                    })
            },
            add(){
                this.role={};
                this.modaladd=true;
            },
            doadd(){
                axios.post("/roleadd",this.role)
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getrolelist();
                    })
            },
            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"确定是否要删除?",
                    content:"操作不可逆，删不删？",
                    onOk(){
                        axios.get("/roledel?id="+row.id)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg})
                                _this.getrolelist();
                            })
                    },
                    onCancel(){
                        alert("取消")
                    }
                })
            },
            update(row,index){
                this.role = row;
                this.modalupdate=true;
            },
            doupdate(){
                // axios.defaults.headers = {
                //     "Content-type": "application/x-www-form-urlencoded"
                // };
                //Qs.stringify(this.role)      stringify :对象role转为序列化字符串
                let params=Qs.stringify(this.role,{serializeDate:(date)=>{
                        return moment(date).format("YYYY-MM-DD HH:mm");
                    }});
                //Qs.parse(params)  将字符串转为json类型
                axios.post("/roleupdate",Qs.parse(params))
                    .then(({data})=>{
                        iview.Message.success({content:data.msg})
                        this.getrolelist();
                    })
            }
        }
    })
</script>
</html>
